<template>
  <div class="room-show">
    <el-row>
      <el-col :span="6" v-for="room in roomList" :key="room['id']">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">{{ typeMap.get(room['type'])['name'] }}</span>
            <el-button
                v-if="room.status !== '有客'"
                type="primary"
                style="float: right; padding: 1px 0; width: 50px; height: 23px; "
                @click="orderRoom(room['id'])"
            >订房
            </el-button>
            <el-button
                v-if="room.status === '有客'"
                type="danger"
                style="float: right; padding: 1px 0; width: 50px; height: 23px;"
                @click="billRoom(room)"
            >退房
            </el-button>
          </div>
          <div>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="房间名" :labelStyle="{'font-weight': 'bold'}">
                {{ room['name'] }}
              </el-descriptions-item>
              <el-descriptions-item label="房间位置" :labelStyle="{'font-weight': 'bold'}">
                {{ room['location'] }}
              </el-descriptions-item>
              <el-descriptions-item label="床位数量" :labelStyle="{'font-weight': 'bold'}">
                <el-tag size="small">{{ typeMap.get(room['type'])['bed'] }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="入住人数" :labelStyle="{'font-weight': 'bold'}">
                <el-tag size="small">{{ typeMap.get(room['type'])['people'] }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="独立卫浴" :labelStyle="{'font-weight': 'bold'}">
                <el-tag :type="typeMap.get(room['type'])['bathroom'] === 0 ? 'danger' : ''" size="small">
                  {{ typeMap.get(room['type'])['bathroom'] === 0 ? '无' : '有' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="空调" :labelStyle="{'font-weight': 'bold'}">
                <el-tag :type="typeMap.get(room['type'])['air'] === 0 ? 'danger' : ''" size="small">
                  {{ typeMap.get(room['type'])['air'] === 0 ? '无' : '有' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="电视" :labelStyle="{'font-weight': 'bold'}">
                <el-tag :type="typeMap.get(room['type'])['television'] === 0 ? 'danger' : ''" size="small">
                  {{ typeMap.get(room['type'])['television'] === 0 ? '无' : '有' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="退房信息" :visible.sync="billDialog" :before-close="closeDialog">
      <span>房间费用:</span>
      <span style="color: brown">{{ order['price'] }}</span>
      <br>
      <span>入住时间:{{ order['sdate'] }} <i class="el-icon-d-arrow-right"></i> {{ order['edate'] }}</span>
      <br>
      <span>折扣:</span>
      <el-tag>
        {{ order['discount'] }}折
      </el-tag>
    </el-dialog>
  </div>
</template>

<script>
import {billRoom} from "@/api/OrderApi";

export default {
  name: "RoomShow",
  props: {
    roomList: {
      type: Array,
      require: true
    },
    typeMap: {
      type: Map,
      require: true
    }
  },
  data() {
    return {
      billDialog: false,
      currentRoom: {},
      order: {}
    }
  },
  methods: {
    orderRoom(id) {
      this.$router.push('/order/' + id)
    },
    billRoom(room) {
      this.$confirm('确认结算吗？', {
        title: '通知'
      }).then(s => {
        this.billDialog = true
        this.currentRoom = room
        billRoom(room['id']).then(res => {
          this.order = res['data']
        })
      }).catch(e => {
        this.$message('取消结算')
      })
    },
    closeDialog(done) {
      done()
      this.$store.commit('addKey')
    }
  }
}
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
